<!DOCTYPE html>
<html xmlns=http://www.w3.org/1999/xhtml xmlns:bd=http://www.baidu.com/2010/xbdml>
<head>
    <meta charset="utf-8">
    <title>区域列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link Rel="SHORTCUT ICON" href="/pc/login/img/logo1.png">
    <link rel="stylesheet" href="/pc/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/pc/layout/css/font_eolqem241z66flxr.css" media="all" />
    <link rel="stylesheet" href="/pc/layout/css/news.css" media="all" />
    <script type="text/javascript" src="/pc/layout/js/jquery.min.js"></script>
    <style>
      @media  only screen and (max-width: 885px){
         #ul{
                margin-left: 0px ! important;
            }
        }
           @media  only screen and (min-width: 886px) and (max-width: 992px){
            #ul .dv{

                margin-left: 20% ! important;
            }
        }
      #eee{
          border-left-style: none !important;
      }
      .dv{
          position: relative;
          width: 16px;
          height: 16px;
          border: 1px solid #d2d2d2;
          border-radius: 20px;
         /* left: 50%;*/
          margin-left: -8px;
          cursor:pointer;
      }
      .add{
          position: absolute;
          width: 16px;
          height: 16px;
          left: 0px;
          line-height: 16px;
          border-radius: 20px;
          background-color: #d2d2d2;
      }
      .input{
          position: absolute;
          left: 20px;
          height: 16px;
          border: 0px;
          border-radius: 20px;
          width: 61px;
          line-height: 16px;
          background:transparent;
          border:none;
          outline:medium;
          font-size: 1px;
      }
      *:focus {
          outline: none;
          background-color: transparent;
      }
      ::selection{background:transparent; }
      ::-moz-selection{background:transparent; }

    </style>
</head>
<body class="childrenBody">
<blockquote class="layui-elem-quote news_search">
    <form class="layui-form" id="form" action="/admin/area/index" method="get">
          @if($areaids ==="0")
      <div class="layui-input-inline" style="margin-top: 5px;margin-right: 20px;">
            <label class="layui-form-label" style="padding: 0;width: 66px;height: 38px;background: #E5E5E5;text-align: center;line-height: 38px;border-radius: 2px;">代理商</label>
            <div class="layui-input-block" style="width: 15em;margin-left: 66px">
                <select name="agent_id" lay-verify="required" lay-search="">
                         <option value="">请选择代理商</option>
                         @if(!empty($agentInfo))
                             @foreach($agentInfo as $v)
                                <option value="{{$v['id']}}" @if($v['id'] == $get['agent_id']) selected @endif>{{$v['name']}}</option>
                             @endforeach
                         @endif
                        </select>
            </div>
        </div>
    @endif
         <div class="layui-input-inline" style="margin-top: 5px; margin-right: 30px;">        
            <label class="layui-form-label" style="padding: 0;width: 66px;height: 38px;background: #E5E5E5;text-align: center;line-height: 38px;border-radius: 2px;">区域</label>
            <input type="text" name="area" value="{{$get['area']}}" placeholder="请输入区域" class="layui-input search_input" style="width: 15em">
        </div>
       <div class="layui-input-inline" style="">
        <a class="layui-btn search_btn" style="margin-top: 5px;" id="select">查询</a>
        @if($areaids ==="0")
         <a class="layui-btn linksAdd_btn" style="background-color:#5FB878;margin-top: 5px;">添加</a>
        @endif
        </div>
        <script>
            $('#select').click(function () {
                $('#form').submit();
            })
        </script>
    </form>
</blockquote>
<div class="layui-form links_list">
    {{csrf_field()}}
    <table class="layui-table">
        <thead>
        <tr>
            <th style="width: 10%;">区域编号</th>
            <th>区域名称</th>
            <th colspan="2" >负责人</th>
            <th style="width: 20%;">操作</th>
        </tr>
        </thead>
        <tbody class="news_content">
        @if(!empty($data))
            @foreach($data as $val)
            <tr id="area_{{$val['id']}}">
                <td>{{$val['id']}}</td>
                <td>{{$val['name']}}</td>
                <td id="addB" style="position: relative;border-right-style:none">
                <ul  id="ul_{{$val['id']}}" style="height: 1em;margin-left: 40%;line-height: 1em">
                @if(!empty($val['member']))
                    @foreach($val['member'] as $v)
                        <li  class="{{$v['pivot']['area_id']}}-{{$v['pivot']['member_id']}}" style="float: left;width: 70%;">{{$v['name']}}&nbsp;<img style="margin-left: -.2em; cursor:pointer" src="/pc/area/img/del.png" onclick="del({{$v['pivot']['area_id']}},{{$v['pivot']['member_id']}})"></li>
                    @endforeach
                @endif
                </ul>
                </td>
                <td style="border-left-style:none">
                    <div class="dv dv_{{$val['id']}}">
                        <i class="add add_{{$val['id']}}" mark="off" onmousedown="monitoringArea()" onclick="add({{$val['id']}})">+</i>
                    </div>
               </td>
                <td>
                    <a class="layui-btn layui-btn-mini" onclick="editArea({{$val['id']}})"><i class="iconfont icon-edit"></i> 编辑</a>
                    @if($areaids ==="0")
                    <a class="layui-btn layui-btn-danger layui-btn-mini" onclick="delArea({{$val['id']}})"><i class="layui-icon"></i> 删除</a>
                    @endif
                </td>
            </tr>
            @endforeach
        @endif
        </tbody>
    </table>
</div>
@if(!null == $areaInfo)
    <div style="float:right;">
        {!! $areaInfo->appends($request)->render() !!}
    </div>
@endif
</body>
<script type="text/javascript" src="/pc/layui/layui.js"></script>
<script type="text/javascript" src="/pc/area/js/area.js"></script>
<script>
function add(id) {
    var mark = $('.add_'+id).attr('mark');
    if(mark == 'off'){
        $('.add_'+id).attr('mark','on').html('ok');
        $('.dv_'+id).animate({
            height: '20px',
            width: '84px',
            paddingLeft:'5px',
            paddingTop:'3px',
        },500).append("<input type='text' onblur='test("+id+")' class='input input_"+id+"'>");
         $('.input_'+id).focus();
    }else{
        var member = $('.input_'+id).val();
        $.ajax({
            url:'/admin/area/addmember',
            type:'post',
            async:false,
            data:{
                "_token": $("input[name=_token]").val(),
                'id':id,
                'member':member
            },
            dataType:'json',
            success:function (data) {
                if(data.status == 1){
                    $('.add_'+id).attr('mark','off').html('+');
                  if($('.input_'+id).length > 0){
                            $('.input_'+id).hide();
                        }
                    $('.dv_'+id).animate({
                        height: '16px',
                        width: '16px',
                        paddingLeft:'0px',
                        paddingTop:'0px',
                    }).css("border","1px solid #d2d2d2");
                    $('#ul_'+id).append("<li  class='"+id+"-"+data.member_id+"' style='float: left;width: 5em'>"+member+"&nbsp<img style='margin-left: -.2em; cursor:pointer' src='/pc/area/img/del.png' onclick='del("+id+","+data.member_id+")'></li>")
                }else{
                    $('.dv_'+id).css("border","1px red solid");
                    top.layer.msg("此用户无效",{time:"500"});
                }
            }
        })

    }
}
       //移除负责人事件
function del(area_id,member_id) {
    $.ajax({
        url:'/admin/area/delmember',
        type:'post',
        async:false,
        data:{
            "_token": $("input[name=_token]").val(),
            'area_id':area_id,
            'member_id':member_id
        },
        dataType:'json',
        success:function (data) {
            if(data.status == 1){
                $('.'+area_id+'-'+member_id).remove();
            }
        }
    })
}

function monitoringArea(){
        event.preventDefault();
    }

    //失去焦点事件
    function test(id) {
        $('.add_'+id).attr('mark','off').html('+');
        if($('.input_'+id).length > 0){
            $('.input_'+id).remove();
        }
        $('.dv_'+id).animate({
            height: '16px',
            width: '16px',
            paddingLeft:'0px',
            paddingTop:'0px',
        }).css("border","1px solid #d2d2d2");
    }
//操作
function editArea(id){  //编辑
     // layer.alert('您点击了友情链接编辑按钮，由于是纯静态页面，所以暂时不存在编辑内容，后期会添加，敬请谅解。。。',{icon:6, title:'友链编辑'});
     layui.layer.open({
     title : "编辑区域",
     type: 2,
     content: '/admin/area/edit?id='+id, //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
     area: ['45em', '45em']
     });
 }

function delArea(id){  //删除
    layer.confirm('确定删除此信息？',{icon:3, title:'提示信息'},function(index){
        $.ajax({
            url:'/admin/area/destroy',
            type:'post',
            async:false,
            data:{
                "_token": $("input[name=_token]").val(),
                'id':id
            },
            dataType:'json',
            success:function (data) {
                  console.log(data)
                if(data.status == 1){
                    $('#area_'+id).remove();
                    top.layer.msg("删除成功",{time:"500"});
                }else if (data.status == -1) {
                      top.layer.msg("数据删除失败",{time:"800"});
                }
                if( data.status == -2){
                      top.layer.msg("删除失败,请检查该区域下是否有建筑/房间/设备!",{time:"2000"});
                }
            }
        })
        layer.close(index);
    });
}
</script>
</html>